<template>
  <div class="input">
    <input class="input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
  </div>
</template>

<style lang="stylus" scoped>
.input
  margin 50px 0
  position relative
  display inline-block
  &-fill
    border 1px solid #ececec
    outline none
    padding 13px 16px 13px
    font-size 16px
    line-height 1.5
    width fit-content
    border-radius 5px
    &:focus
      border 1px solid #2486ff
    // &:placeholder-shown::placehlder
    //   color transparent
    &::-webkit-input-placeholder
      color transparent
  &-label
    position absolute
    font-size 16px
    line-height 1.5
    left 16px
    top 14px
    color #a2a9b6
    padding 0 2px
    transform-origin 0 0
    pointer-events none
    transition all .25s
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label
  transform scale(0.75) translate(0, -32px)
  // background-color #fff
  color #2486ff

</style>
